<template>
  <div>
    <ul>
      <li
        v-for="(item,index) in navs"
        :key="item"
        @click="n=index"
        :class="[index==n? 'select':'']"
      >{{item}}</li>
    </ul>
    <div v-if="goodArr.length>0">
      <div
        @click="$router.push('/detail?id='+item.id)"
        class="cons"
        v-for="item in goodArr[n].content"
        :key="item.id"
      >
        <img :src="$pre+item.img" alt />
        <div class="desc">
          <p>{{item.goodname}}</p>
          <p>现价格：{{item.market_price}}</p>
          <p>原价格：{{item.price}}</p>
          <button>立即抢购</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqHomeGoods } from "../../../http/api";
export default {
  data() {
    return {
      navs: ["限时", "好货", "抢购"],
      goodArr: [],
      n: 0,
    };
  },
  mounted() {
    reqHomeGoods().then((res) => {
        console.log(this.n);
      this.goodArr = res.data.list;
    });
  },
};
</script>

<style scoped>
.select {
  color: #ff4400;
}
.cons {
  display: flex;
}
.cons img {
  width: 100%;
  height: 2rem;
  flex: 4;
}
.cons .desc {
  flex: 6;
  display: flex;
  flex-direction: column;
}
ul {
  display: flex;
}
li {
  flex: 1;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
}
</style>